<template>
	<div class="pt-20px pb-20px min-h-600px">
		<el-tabs v-model="activeName" class="digital-tabs" @tab-click="handleClick">
			<el-tab-pane label="货币充值" name="first">
				<template #default>
					<div class="mt-30px">
						<div class="mb-30px">
							<StepRow one="选择充币币种" two="确认充币主网络" three="充值地址" >
								<template #one>
									<StepOne></StepOne>
								</template>
								<template #two>
									<StepTwo title="充币网络"></StepTwo>
								</template>
								<template #three>
									<RechargeAddress></RechargeAddress>
								</template>
							</StepRow>
						</div>
						<RechargeTable>
							<template #default>
								<div class="flex items-center justify-between">
									<div class="text-#000000
									font-bold text-18px">
										近期充值记录
									</div>
									<div class="text-#114CEE text-16px">
										查看更多
									</div>
								</div>
							</template>
						</RechargeTable>
					</div>
				</template>
			</el-tab-pane>
			<el-tab-pane label="货币提现" name="second">
				<template #default>
					<div class="mt-30px">
						<div class="mb-30px">
							<StepRow one="选择提币币种" two="确认提币主网络" three="提币地址" >
								<template #one>
									<StepOne></StepOne>
								</template>
								<template #two>
									<StepTwo title="提币网络"></StepTwo>
								</template>
								<template #three>
									<Withdrawal></Withdrawal>
								</template>
							</StepRow>
						</div>
						<RechargeTable>
							<template #default>
								<div class="flex items-center justify-between">
									<div class="text-#000000
									font-bold text-18px">
										近期提币记录
									</div>
									<div class="text-#114CEE text-16px">
										查看更多
									</div>
								</div>
							</template>
						</RechargeTable>
					</div>
				</template>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<script lang="ts" setup>
import RechargeTable from './components/RechargeTable.vue';
import StepRow from './components/StepRow.vue';
import StepOne from './components/StepOne.vue';
import StepTwo from './components/StepTwo.vue';
import RechargeAddress from './components/RechargeAddress.vue';
import Withdrawal from './components/Withdrawal.vue';
const activeName = ref('first');

const handleClick = (tab:any, event:any) => {
	console.log(tab, event);
};
</script>
<style lang="scss" scoped>
</style>
<style lang="scss">
.digital-tabs{
	.el-tabs__nav-wrap:after{
		display: none;
	}
	.el-tabs__header{
		margin: 0;
	}
	.el-tabs__item{
		font-size: 16px;
		color:#86909C;
	}
	.is-active{
		color:#000000;
	}
	.el-tabs__active-bar{
		background-color: #114CEE;
		height: 4px;
	}
}
</style>
